<template>
  <view class="container">
    <!-- 功能1：选择本地图片 -->
    <button @click="chooseImage">选择本地图片</button>
    <button @click="previewImage" v-if="imageList.length > 0">预览图片</button>
    <view class="image-list">
      <image 
        v-for="(img, index) in imageList" 
        :key="index" 
        :src="img" 
        mode="widthFix"
        style="width: 300rpx; margin: 20rpx 0;"
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageList: [] // 存储选择的图片路径
    };
  },
  methods: {
    // 选择本地图片
    chooseImage() {
      uni.chooseImage({
        count: 1, // 最多选择1张
        sizeType: ['original', 'compressed'], // 原图/压缩图
        sourceType: ['album', 'camera'], // 相册/相机
        success: (res) => {
          this.imageList = res.tempFilePaths; // 存储临时路径
          console.log('选择图片成功', res.tempFilePaths);
        },
        fail: (err) => {
          console.error('选择图片失败', err);
        }
      });
    },
    // 预览图片
    previewImage() {
      uni.previewImage({
        urls: this.imageList, // 预览的图片路径数组
        current: this.imageList[0], // 初始显示的图片索引
        success: (res) => {
          console.log('预览图片成功');
        },
        fail: (err) => {
          console.error('预览图片失败', err);
        }
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 30rpx;
}
button {
  margin: 20rpx 0;
  padding: 20rpx;
  background-color: #007aff;
  color: white;
  border-radius: 8rpx;
}
</style>